<template>
  <div>
    <el-container>
      <el-aside :style="asideStyle">
        <Navbar :menus="menus" :collapse="isCollapse"></Navbar>
      </el-aside>
      <el-container>
        <el-header>
          <!-- 绑定方法handleCollapse  -->
          <i class="el-icon-share" :class="iconDeg" @click="handleCollapse">
          </i>

          <span
            style="           
              font-size: 25px;
              -webkit-text-fill-color: transparent;
              -webkit-text-stroke: 1px #000;
            "
          >
            电商后台管理系统
          </span>

          <el-dropdown>
            <span class="el-dropdown-link">
             {{ name }}  <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>修改头像</el-dropdown-item>
              <el-dropdown-item>修改密码</el-dropdown-item>
              <el-dropdown-item @click.native="handlelogout"
                >注销登录</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
        <el-footer>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-beian"></use>
          </svg>
          Copyright 2021-2021 lucas信息科技 All rights Reserved.
        </el-footer>
      </el-container>
    </el-container>

    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <span>你确定要注销登录吗?</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible=false">取 消</el-button>
        <el-button type="primary" @click="confimlogout">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Navbar from "./Navbar/Index.vue";
import routes from "../../router/routes";
import { ClearToken,clearUsername,getUsername } from "../utils/auth";

export default {
  components: { Navbar },
  data() {
    return {
      //默认是折叠的
      isCollapse: false,

      dialogVisible: false,

      name:"" 
    };
  },
  methods: {
    //点击事件
    handleCollapse() {
      this.isCollapse = !this.isCollapse;
    },
    //注销登录
    handlelogout() {
      ClearToken();
      clearUsername();
      this.dialogVisible = true;

    },
    //确定注销登录按钮
    confimlogout() {
      console.log("确定注销");
      ClearToken();
      this.$router.push("/login");
    },
    resolve(arr, parentPath = "") {
      let newArr = [];

      arr.forEach((route) => {
        // 当第一次parentPath='' 所以找不到任何元素 所以返回-1
        parentPath =
          parentPath && parentPath.lastIndexOf("/") !== parentPath.length - 1
            ? parentPath + "/"
            : parentPath;
        // console.log(parentPath);
        //assign 将源头数据给目标源
        let obj = Object.assign({}, route);
        obj.path = parentPath + obj.path;
        // console.log(obj.path);
        //判断是否有子路由 如过有递归处理子节点
        if (obj.children && obj.children.length > 0) {
          obj.children = this.resolve(obj.children, obj.path);
        }
        //如果菜单是隐藏 当前路由不作为导航栏显示 只将其children加入到菜单栏
        if (obj.meta.hidden) {
          //如果存在子属性 将所有子节点添加到数组里 否则 不做处理
          if (obj.children && obj.children.length > 0) {
            obj.children.forEach((item) => {
              let temp = Object.assign({}, item);
              newArr.push(temp);
            });
          }
        } else {
          newArr.push(obj);
        }
      });
      return newArr;
    },
  },
  computed: {
    menus() {
      return this.resolve(routes);
    },
    asideStyle() {
      //如果是折叠auto 不是左侧导航栏width:200px
      return {
        width: this.isCollapse ? "auto" : "200px",
      };
    },
    iconDeg() {
      // 如果是折叠 icon-deg样式属性
      return {
        "icon-deg": this.isCollapse ? true : "",
      };
    },
  },
  mounted() {
    this.name = getUsername();
  },
};
</script>

<style scoped>
/* 中间有空隙解决 */
.el-menu {
  border-right: none;
}

.el-header,
.el-footer {
  background-color: #909399;
  color: #333;
  line-height: 60px;
}

.el-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tapright {
  margin-right: 100px;
}

/* 设置底部颜色-渐变色 */
.el-footer {
  text-align: center;
  font-weight: 300;
  font-size: 20px;
  font-family: "黑体";
  color: black;
  background: -webkit-linear-gradient(
    45deg,
    #70f7fe,
    #fbd7c6,
    #fdefac,
    #bfb5dd,
    #bed5f5
  );
}

/* 设置背景颜色 */
.el-aside {
  background-color: rgb(84, 92, 100);

}

.el-main {
  /* background-color: #e9eef3; */
  transition: background-color 0.25s ease;
  /* 设置自适应高度 */
  min-height: calc(100vh - 120px);
}

body > .el-container {
  margin-bottom: 0px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

/* 设置翻转 */
.icon-deg {
  transform: rotate(-180deg);
}

/* 下拉菜单 */
.el-dropdown-link {
  cursor: pointer;
  color: coral;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>